<template>
	<view class="content">
		<view class="title">
			欢迎进入稷生堂▪健康管理系统，为更好提供及时、有效的健康服务，请您如实填写以下资料：
		</view>
		<u-form :model="form" ref="uForm" label-width="auto" :label-style="labelStyle">
			<u-form-item label="姓名" prop="truename">
				<u-input v-model="form.truename" placeholder="请填写您的姓名"></u-input>
			</u-form-item>
			<u-form-item label="性别">
				<u-input v-model="genderText" type="select" placeholder="请选择您的性别" :select-open="showSex" @click="showSex = true"></u-input>
			</u-form-item>
			<u-form-item label="出生年月">
				<u-input v-model="form.birthday" placeholder="请选择您的出生年月" type="select" :select-open="showtime" @click="showtime = true"></u-input>
			</u-form-item>
			<!-- <u-form-item label="年龄">
				<u-input v-model="form.age" placeholder="请填写您的年龄"></u-input>
			</u-form-item> -->
			<u-form-item label="身高">
				<u-input v-model="form.height" placeholder="请填写您的身高"></u-input>
				<text slot="right">cm</text>
			</u-form-item>
			<u-form-item label="体重">
				<u-input v-model="form.weight" placeholder="请填写您的体重"></u-input>
				<text slot="right">kg</text>
			</u-form-item>
			<u-form-item label="联系方式" prop="mobile">
				<u-input v-model="form.mobile" type="number" placeholder="请填写您的联系方式" maxlength="11"></u-input>
			</u-form-item>
			<u-form-item label="文化程度">
				<u-input v-model="educationTxt" type="select" placeholder="请选择您的文化程度" :select-open="showeducation" @click="showeducation = true"></u-input>
			</u-form-item>
			<u-form-item label="职业">
				<u-input v-model="occupationTxt" type="select" placeholder="请选择您的职业" :select-open="showoccupation" @click="showoccupation = true"></u-input>
			</u-form-item>
			<u-form-item label="近年是否有手术情况">
				<u-radio-group v-model="form.is_shoushu" @change="radioGroupChange">
					<u-radio name="1" shape="square">是</u-radio>
					<u-radio name="0" shape="square">否</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="手术年限" v-if="form.is_shoushu == 1" label-position="top">
				<u-radio-group v-model="form.ssnx">
					<u-radio shape="square" :name="item.value" v-for="item in ssnx" :key="item.value">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="ABO血型" label-position="top">
				<u-radio-group v-model="form.blood_group">
					<u-radio shape="square" :name="item.value" v-for="item in blood_group" :key="item.value">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="慢性病患病情况" label-position="top">
				<checkbox-group @change="checkboxChange">
					<label v-for="item in mxb" :key="item.value" style="font-size: 32rpx; display: flex; align-items: center;">
						<checkbox :value="item.value" :checked="item.checked" color="#2979ff" style="transform:scale(0.9); margin-top: -10rpx;" />{{ item.name }}
					</label>
				</checkbox-group>
			</u-form-item>
			<u-form-item>
				<u-button @click="submit" type="success">{{id ? '保存' : '提交'}}</u-button>
			</u-form-item>
		</u-form>
		<u-picker v-model="showtime" mode="time" @confirm="timeCallback"></u-picker>
		<u-select v-model="showSex" :list="sexList" safe-area-inset-bottom @confirm="sexCallback"></u-select>
		<u-select v-model="showoccupation" :list="occupationList" label-name="name" safe-area-inset-bottom @confirm="occupationCallback"></u-select>
		<u-select v-model="showeducation" :list="educationList" label-name="name" safe-area-inset-bottom @confirm="educationCallback"></u-select>
	</view>
</template>

<script>
	import { getOPtion, submitEhr, EhrDetail } from '@/api/api'
	export default {
		data() {
			return {
				form: {
					truename: '',
					gender: '',
					birthday: '',
					height: '',
					weight: '',
					mobile: '',
					education: '',
					occupation: '', // 职业
					is_shoushu: '0', // 手术情况
					ssnx: '', // 手术年限
					blood_group: '', // 血型
					mxb: '', //慢性病患病情况
				},
				labelStyle: {
					marginRight: '30rpx',
					fontSize: '32rpx'
				},
				showSex: false,
				genderText: '',
				sexList: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				showtime: false,
				showoccupation: false,
				occupationList: [],
				occupationTxt: '',
				showeducation: false,
				educationList: [],
				educationTxt: '',
				blood_group: [],
				ssnx: [],
				mxb: [],
				rules: {
					truename: [
						{
							required: true, 
							message: '请填写您的姓名',
							trigger: ['blur'],
						}
					],
					mobile: [
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					]
				},
				id: ''
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			Promise.all([this.initData()]).then(res => {
				console.log(res)
				if(option.id) {
					this.id = option.id
					this.getDetail(option.id)
				}
			})
		},
		methods: {
			initData() {
				getOPtion().then(res => {
					this.occupationList = res.data.occupation
					this.educationList = res.data.education
					this.blood_group = res.data.blood_group
					this.ssnx = res.data.ssnx
					// res.data.mxb.map(el => el.checked = false)
					this.mxb = res.data.mxb
				})
			},
			// 详情
			getDetail(id) {
				EhrDetail({ id }).then(res => {
					this.form.truename = res.data.truename
					this.form.gender = res.data.gender
					this.form.birthday = res.data.birthday
					this.form.height = res.data.height
					this.form.weight = res.data.weight
					this.form.mobile = res.data.mobile
					this.form.education = res.data.education
					this.form.occupation = res.data.occupation // 职业
					this.form.is_shoushu = res.data.is_shoushu // 手术情况
					this.form.ssnx = res.data.ssnx // 手术年限
					this.form.blood_group = res.data.blood_group // 血型
					let data = res.data.mxb.split(',')
					this.mxb.map(item => {
						data.map(el => {
							if(el == item.value) {
								this.$set(item,'checked',true)
							}
						})
					})
					this.form.mxb = res.data.mxb //慢性病患病情况
					this.genderText = res.data.gender_data
					this.educationTxt = res.data.education_data
					this.occupationTxt = res.data.occupation_data
				})
			},
			sexCallback(e) {
				this.form.gender = e[0].value
				this.genderText = e[0].label
			},
			timeCallback(e) {
				this.form.birthday = e.year+'-'+e.month+'-'+e.day
			},
			occupationCallback(e) {
				this.form.occupation = e[0].value
				this.occupationTxt = e[0].label
			},
			educationCallback(e) {
				this.form.education = e[0].value
				this.educationTxt= e[0].label
			},
			radioGroupChange(e) {
				this.form.ssnx = ''
			},
			checkboxChange: function (e) {
				this.form.mxb = e.detail.value.toString()
				// var items = this.mxb,
				// 	values = e.detail.value;
				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if(values.includes(item.value)){
				// 		this.$set(item,'checked',true)
				// 	}else{
				// 		this.$set(item,'checked',false)
				// 	}
				// }
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						submitEhr({
							id: this.id,
							...this.form
						}).then(res => {
							if(res.code == 1) {
								uni.showToast({
									title: '提交成功',
									success: () => {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1000)
									}
								})
							} else {
								this.$u.toast(res.msg)
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
		
	}
</script>

<style lang="scss">
.content {
	width: 100%;
	padding: 0 30rpx 30rpx;
	background-color: #fff;
	.title {
		border-bottom: 1px solid #eee;
		font-size: 32rpx;
		padding: 30rpx 0;
	}
	.u-input__input {
		font-size: 32rpx !important;
	}
	.u-radio__label {
		font-size: 32rpx !important;
	}
}
</style>
